<template>
  <div class="imageForum">
    <van-sticky>
      <div
        style="
          background: #f5f5f5;
          box-shadow: 0px 4px 12px rgba(21, 24, 45, 0.09);
        "
      >
        <van-search
          v-model="searchValue"
          show-action
          placeholder="请输入搜索AI影像标题"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>

        <div class="timeSelect">
          <p>创建时间 <button @click="reset">重置时间</button></p>
          <div>
            <span :class="{ onTime: startOn }" @click="showTime(0)">{{
              startDate
            }}</span>
            ~
            <span :class="{ onTime: endOn }" @click="showTime(1)">{{
              endDate
            }}</span>
          </div>
          <button
            @click="
              timeRang();
              selTime = false;
            "
          >
            确认
          </button>
        </div>
      </div>
    </van-sticky>

    <van-list
      v-model="incomeLoading"
      :finished="incomeFinished"
      finished-text="没有更多了"
      @load="getList(true)"
      offset="10"
      class="cellGroup"
      v-if="hasContent"
    >
      <li
        @click="toDetail(i)"
        class="detailList"
        v-for="(i, index) in items"
        :key="index"
      >
        <div class="title">
          <span>标题:{{ i.caseName }} </span>
          <p>创建时间:{{ i.creatTime }}</p>
        </div>
        <div class="middle">
          <span>正文:</span>
          <div>
            <p>{{ i.content }}</p>
          </div>
        </div>
        <div class="benificial">
          <span>创建者:{{ i.userName }}</span>
          <p>评论数:{{ i.caseLike }}</p>
          <p>浏览次数:{{ i.views }}次</p>
        </div>
      </li>
    </van-list>
    <div v-else class="notHas">
      <!-- <img  src="@/assets/images/scientific/pic-zwdd@2x.png" alt=""> -->
      <span>暂无订单</span>
    </div>

    <div class="sticky" style="background: #fff; padding: 10px">
      <button @click="showTalk = true">
        我也来说说<van-icon
          :style="{ width: '30px' }"
          name="chat-o"
          color="#fff"
        />
      </button>
    </div>

    <van-popup
      v-model="showTimePicker"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-datetime-picker
        ref="timePicker"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="setTime"
        @cancel="close"
        :formatter="formatter"
      />
    </van-popup>
    <van-popup v-model="showTalk" position="bottom" :style="{ height: '70%' }">
      <div class="topic">
        <van-field
          v-model="talkTitle"
          label="标题"
          type="text"
          placeholder="请输入标题"
        />
        <van-field
          v-model="talkContent"
          rows="2"
          autosize
          label="正文"
          type="textarea"
          maxlength="50"
          placeholder="请输入正文内容"
          show-word-limit
        />

        <p>附加文件上传</p>
        <van-uploader v-model="fileList" :after-read="afterRead" :max-count="5"  />
        <button @click="submit">确认提交</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Search, Toast, Sticky } from "vant";

import { mapGetters } from "vuex";
import { getStorage } from "@/utils/auth";
import { Uploader } from "vant";
import { getImageCase,uploadCase,setImageCase } from "@/api/scientificPart";

export default {
  name: "imageForum",
  components: {},
  data() {
    return {
      active: 0,
      placeholder: "",
      searchValue: "",
      showTimePicker: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      startDate: "选择日期", //开始时间
      endDate: "选择日期", //结束时间
      startOn: false, //颜色标识
      endOn: false, //颜色标识
      items: [
        // {title:'肺结核的治疗手法',content:'slkjdlkdjfgkljdfkgnkdfgn', img:require('@/assets/images/scientific/headImg.png'), nickName:'asd',time:'2020-08-21 19:20:36',state:'已结算',name:'京东金条',orderNum:'QY202081698654165416'},
      ],
      itemsCopy: [],

      incomeLoading: false,
      incomeFinished: true,
      hasContent: true,
      currentDate: new Date(),
      showTalk: false,
      talkTitle: "", //发表评论标题
      talkContent: "", //发表评论内容
      talkImages: [], //发表评论上传图片
        fileList: [
      
        ],
    };
  },

  computed: {
    ...mapGetters(["userData"]),
  },
  watch: {},
  methods: {
    onSearch() {
      //搜索关键字
      this.items = [];
      if (this.searchValue) {
        this.itemsCopy.forEach((i) => {
          if (i.caseName.indexOf(this.searchValue) != -1) {
            //匹配标题
            this.items.push(i);
          }
        });
      } else {
        this.items = this.itemsCopy;
      }
    },
    showTime(num) {
      this.showTimePicker = true;
      num == 0 ? (this.onStart = true) : (this.onStart = false);
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    publish() {
      //发表说说
      this.showTalk = true;
    },
    setTime(value) {
      //时间选择
      let d = new Date(value);

      this.onStart
        ? (this.startDate =
            d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())
        : (this.endDate =
            d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
      this.onStart ? (this.startOn = true) : (this.endOn = true); //标识选完时间后换颜色

      this.showTimePicker = false;
    },

    close() {
      //关闭时间选择
    },
    getList() {
      //获取交流列表
    },
    timeRang() {
      //确认筛选创建时间
      if (this.startDate == "选择日期" || this.endDate == "选择日期") {
        Toast("请选择时间");
      } else {
        this.itemsCopy.forEach((i) => {
          let t = new Date(i.creatTime).getTime();
          let s = new Date(this.startDate + " 00:00:00").getTime();
          let e = new Date(this.startDate + " 23:59:59").getTime();
          if (t > s && t < e) {
            this.items.push(i);
          }
        });
      }
    },

    reset() {
      //重置时间

      this.startDate = "选择日期";
      this.endDate = "选择日期";
      this.startOn = false;
      this.endOn = false;
      this.items = [];
      this.items = this.itemsCopy;
    },
    toDetail(item) {
      this.$router.push({ name: "imgForumDetail", params: { item: item } });
    },
    formatter(type, val) {
      //选择时间形式
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      return val;
    },
    submit() {
      //提交话题
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
      this.fileList.forEach((i) => {
        formData.append("file", i.file); //接口需要传的参数
      });
      let sign = new Date();

      formData.append("maxid", sign);

      uploadCase(formData).then(res=>{

      })

      let obj = {
        maxid: sign,
        caseName: "dfgdfg",
        caseId: 123,
        views: "dfgdfg",
        userName: "dfgdfg",
        theme: "dfgdfg",
        content: "dfgdfg",
        available: "dfgdfg",
        caseLike: "dfgdfg",
        unlike: "dfgdfg",
        lungClassId: "dfgdfg",
        dsid: "dfgdfg",
      };
      setImageCase(obj).then(res=>{

      })
    },
  },
  created() {
    getImageCase().then((res) => {
      res.data.info.forEach((i) => {
        this.items.push(i);
        this.itemsCopy.push(i); //提供查找
      });
    });
  },
  mounted() {},
  destroyed() {},
};
</script>
<style lang='scss' scoped>
/deep/.van-search__content--square {
  border-radius: 100px;
}
/deep/.van-search__action {
  background: #07c160;
  color: #fff;
  border-radius: 5px;
}
.timeSelect {
  padding: 0 15px;
  background: #fff;
  padding-bottom: 10px;
  margin-top: 10px;
  // box-shadow: 0 -1px 3px #e6e6e6;
}
.timeSelect p {
  color: #999;
  font-size: 14px;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.timeSelect p button {
  background: #07c160;
  padding: 5px 10px;
  color: #fff;
  border: 0;
  border-radius: 3px;
  font-size: 12px;
}
.timeSelect > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.timeSelect > div {
  font-size: 15px;
}
.timeSelect > div > span {
  color: #b7b7b7;
  border: 1px solid #b7b7b7;
  border-radius: 100px;
  padding: 8px 0;
  width: 160px;
  text-align: center;
  font-size: 14px;
}
.timeSelect > div .onTime {
  color: #333;
}
.timeSelect > button {
  border-radius: 100px;
  color: #fff;
  display: block;
  text-decoration: none;
  font-size: 12px;
  padding: 13px 0;
  width: 100%;
  border: 0;
  margin: 0 auto;
  margin-top: 10px;
  background: -webkit-linear-gradient(left, #3dc107, #07c1b8);
  /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #3dc107, #07c1b8);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #3dc107, #07c1b8);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #3dc107, #07c1b8);
}
.sticky {
  width: 100%;
  background: #fff;
  padding: 10px 15px;
  box-shadow: 4px 0px 12px rgba(21, 24, 45, 0.09);
  position: fixed;
  bottom: 0;
  button {
    border-radius: 100px;
    color: #fff;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 12px;
    padding: 13px 0;
    width: 93%;
    border: 0;

    background: -webkit-linear-gradient(left, #3dc107, #07c1b8);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #3dc107, #07c1b8);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #3dc107, #07c1b8);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #3dc107, #07c1b8);
  }
}

.detailList {
  margin-top: 10px;
  background: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 13px 15px;
    p {
      width: 61%;
    }
    img {
      width: 14px;
    }
  }
  .middle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 20px 15px;
  }
}

.detailList .middle > img {
  width: 50px;
  margin-right: 12px;
  border-radius: 4px;
}
.detailList .middle span {
  font-size: 15px;
  display: block;
  font-weight: 500;
}
.detailList .middle p {
  margin-top: 11px;
  font-size: 14px;
  color: #999;
}
.detailList > p {
  padding: 7px 0;
  text-align: right;
}
.benificial {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  padding-top: 14px;
  padding-bottom: 12px;
}
.benificial > span {
  font-size: 14px;
}
.benificial > p {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 12px;
}
.benificial > p span:nth-child(1) {
  font-size: 14px;
}
.benificial > p span:nth-child(2) {
  font-size: 16px;
  color: #ff6c0a;
}
.benificial font {
  font-size: 12px;
}
.topic {
  p {
    text-align: left;
    padding: 20px 0;

    margin-left: 0.15rem;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
  }
  button {
    border-radius: 100px;
    color: #fff;
    display: block;

    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 12px;
    padding: 13px 0;
    width: 93%;
    position: fixed;
    bottom: 10px;
    left: 3.5%;
    border: 0;

    background: -webkit-linear-gradient(left, #3dc107, #07c1b8);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #3dc107, #07c1b8);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #3dc107, #07c1b8);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #3dc107, #07c1b8);
  }
}
</style>